.InputWrapper {
  display: flex;
}

.placeholder {
  margin-right: 5px;
}

.input {
  width: 100%;

  font: var(--font-m);
  color: transparent;
  text-shadow: 0 0 0 var(--primary-color);

  background: transparent;
  border: none;
  outline: none;

  &:focus {
    outline: none;
  }
}

.caretWrapper {
  position: relative;
  flex-grow: 1;
}

.caret {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 9px;
  height: 3px;

  background-color: var(--primary-color);

  animation: blink 0.7s forwards infinite;
}

.readonly {
  opacity: 0.7;
}

@keyframes blink {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.01;
  }

  100% {
    opacity: 1;
  }
}
